<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2024-06-14 09:35:18
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-13 10:25:55
 * @FilePath: \qintai-reservoir\src\Views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="wrap" :style="stylePort" ref="appRef">
      <Player />
  
      <transition
        appear
        name="custom-classes-transition"
        enter-active-class="animate__animated  animate__fadeInDown"
        leave-active-class="animate__animated  animate__fadeOutUp"
      >
        <Header v-if="UIShow" />
      </transition>
      <transition
        appear
        name="custom-classes-transition"
        enter-active-class="animate__animated  animate__fadeInDown"
        leave-active-class="animate__animated  animate__fadeOutUp"
      >
        <div class="back" @click="back" v-if="!UIShow">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="返回"
            placement="bottom"
          >
            <Icon
              :color="UIShow ? '#7afafe' : '#fff'"
              :font-size="30"
              icon="back"
            />
          </el-tooltip>
        </div>
      </transition>
      <transition
        appear
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInUp"
        leave-active-class="animate__animated  animate__fadeOutDown"
      >
        <HeaderLink
          v-if="
            UIShow &&
            !AnaphaseShow &&
            !LayerTreeShow &&
            !AnimationShow &&
            !SkyBoxShow &&
            !WeatherShow
          "
        />
      </transition>
  
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInUp"
        leave-active-class="animate__animated  animate__fadeOutDown"
      >
        <Anaphase v-if="AnaphaseShow" />
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInUp"
        leave-active-class="animate__animated  animate__fadeOutDown"
      >
        <LayerTree v-if="LayerTreeShow" />
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInRight"
        leave-active-class="animate__animated  animate__fadeOutRight"
      >
        <Animation v-if="AnimationShow" />
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInRight"
        leave-active-class="animate__animated  animate__fadeOutRight"
      >
        <Skybox v-if="SkyBoxShow" />
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated   animate__fadeInRight"
        leave-active-class="animate__animated  animate__fadeOutRight"
      >
        <Weather v-if="WeatherShow" />
      </transition>
      <router-view></router-view>
    </div>
  </template>
  <script lang="ts" setup>
  import Player from '@/components/player/player.vue'
  import Header from '@/components/header/index.vue'
  import { computed, onMounted, onUnmounted } from 'vue'
  import HeaderLink from '@/components/headerlink/index.vue'
  import { useRoute } from 'vue-router'
  import { useToolsStore } from '@/stores/tools'
  import Anaphase from '@/components/tools/Anaphase.vue'
  import LayerTree from '@/components/tools/layerTree.vue'
  import Animation from '@/components/tools/Animation.vue'
  import Skybox from '@/components/tools/skybox.vue'
  import Weather from '@/components/tools/weather.vue'
  import useDraw from '@/utils/useDraw'
  
  const Route = useRoute()
  const ToolsStore = useToolsStore()
  const AnaphaseShow = computed(() => ToolsStore.$state.AnaphaseShow)
  const UIShow = computed(() => ToolsStore.$state.UIShow)
  const LayerTreeShow = computed(() => ToolsStore.$state.LayerTreeShow)
  const AnimationShow = computed(() => ToolsStore.$state.AnimationShow)
  const SkyBoxShow = computed(() => ToolsStore.$state.SkyBoxShow)
  const WeatherShow = computed(() => ToolsStore.$state.WeatherShow)
  const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
  // 获取视口宽度
  const stylePort = 'width:' + 2816 + 'px;' + 'height:' + 1536 + 'px;'
  
  const back = () => {
    const val = !UIShow.value
    ToolsStore.SetUIShow(val)
    __g.settings.setMainUIVisibility(!val)
  }
  onMounted(() => {
    console.log(Route.path, 'route')
  
    // todo 屏幕适应
    windowDraw()
    calcRate()
  })
  
  defineProps({
    msg: {
      type: String,
      required: false,
    },
  })
  
  onUnmounted(() => {
    unWindowDraw()
  })
  </script>
  <style lang="scss" scoped>
  .back {
    position: fixed;
    @include Top(20);
    @include Right(220);
    z-index: 102;
  }
  .wrap {
    width: 1920px;
    height: 1080px;
    position: absolute;
  
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
  }
  
  </style>
  